<template>
	<view class="container">
		<u-popup :show="poster_show" :round="10" :safeAreaInsetBottom="false" mode="center" bgColor="transparent" @close="close">
			<view class="main_box">
				<view class="image_box" @click="$emit('click')">
					<image :src="image" class="image" @load="imgLoad" mode="aspectFill"></image>
					<view class="content_box">
						<view class="title">
							<text class="title_text">{{title}}</text>
							<text class="title_desc">{{desc}}</text>
						</view>
						<view class="coupon_list_box">
							<view class="coupon_list">
								<scroll-view scroll-y="true" class="scroll">
									<view class="coupon_item" v-for="(item, index) in coupon_list" :key="index">
										<view class="coupon_item_left_wrap">
											<view class="coupon_item_left">
												<view class="money" v-if="item.couponType == 0 || item.couponType == 1">
													<text class="money_icon">￥</text>
													<text class="money_num">{{item.couponDenomination}}</text>
												</view>
												<view class="money"  v-else-if="item.couponType == 2">
													<text class="money_num">{{item.couponDenomination}}</text>
													<text class="money_icon">积分</text>
												</view>
												<view class="money" v-else-if="item.couponType == 3">
													<text class="money_num">{{item.couponDenomination * 10}}</text>
													<text class="money_icon">折</text>
												</view>
												<view class="condition">
													<text>满{{item.howMuchFullMoney}}元可用</text>
												</view>
											</view>
										</view>
										<view class="coupon_item_right_wrap">
											<view class="coupon_item_right">
												<view class="couponType">
													<text class="text1" v-if="item.goodsType == 1">全部商品可用</text>
													<text class="text1" v-if="item.goodsType == 2">指定商品可用</text>
												</view>
												<view class="use_date">
													<!-- <text class="date" v-if="item.timeType == 1">{{setDate(item)}}有效</text> -->
													<text class="date" v-if="item.timeType == 1">指定时间内有效</text>
													<text class="date" v-if="item.timeType == 2">领取后{{item.timeDay}}天内有效</text>
												</view>
											</view>
										</view>
									</view>
								</scroll-view>
							</view>
							<view class="coupon_btn">
								<view class="button">开心收下</view>
							</view>
						</view>
					</view>
				</view>
				<view class="close_box" @click="close">
					<u-icon name="close-circle" size="30" color="#ddd"></u-icon>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name:"poster-popup",
		props: {
			image: {
				type: String,
				default: ''
			},
			coupon_list: {
				type: Array,
				default: []
			},
			title: {
				type: String,
				default: ''
			},
			desc: {
				type: String,
				default: ''
			},
			click_url: {
				type: String,
				default: ''
			}
		},
		data() {
			return {
				poster_show: false
			};
		},
		computed: {
			setDate () {
				return function (item) {
					if (!item.startTime || !item.endTime) return; 
					let dateStr = '';
					let startTime = item.startTime.split(' ')[0];
					let endTime = item.endTime.split(' ')[0];
					return startTime + ' 至 ' +  endTime;
				}
			}
		},
		methods: {
			imgLoad () {
				this.poster_show = true;
			},
			close () {
				this.poster_show = false;
				setTimeout(() => {
					this.$emit('close');
				}, 500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container{
		
		.main_box{
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.image_box{
				position: relative;
				height: 800rpx;
				
				.image{
					width: 550rpx;
					height: 800rpx;
					border-radius: 30rpx;
				}
				
				.content_box{
					width: 100%;
					height: 76%;
					display: flex;
					flex-direction: column;
					align-items: center;
					position: absolute;
					bottom: 0;
					left: 0;
					
					.title{
						width: 100%;
						height: 20%;
						display: flex;
						flex-direction: column;
						align-items: center;
						
						.title_text{
							padding: 10rpx;
							color: #F7EDC5;
							font-weight: bold;
							font-size: 34rpx;
						}
						.title_desc{
							padding: 10rpx;
							color: #e8e8e8;
							font-size: 24rpx;
						}
					}
					
					.coupon_list_box{
						width: 100%;
						height: 80%;
						padding: 0 30rpx;
						box-sizing: border-box;
						display: flex;
						flex-direction: column;
						align-items: center;
						
						.coupon_list{
							width: 100%;
							height: 76%;
							
							.scroll{
								width: 100%;
								height: 100%;
								
								.coupon_item{
									width: 100%;
									height: 120rpx;
									margin-top: 20rpx;
									display: flex;
									align-items: center;
									overflow: hidden;
									
									.coupon_item_left_wrap{
										width: 40%;
										height: 100%;
										background: #fff;
										display: flex;
										align-items: center;
										-webkit-mask: radial-gradient(circle at 0rpx 50%, transparent 10rpx, red 0) 0rpx;
										
										.coupon_item_left{
											width: 100%;
											height: 80%;
											border-right: 1px dashed #ddd;
											display: flex;
											flex-direction: column;
											align-items: center;
											justify-content: space-around;
											
											.money{
												color: #ff0000;
												font-weight: bold;
												
												.money_icon{
													font-size: 28rpx;
													padding: 0 6rpx;
												}
												.money_num{
													font-size: 38rpx;
												}
											}
											
											.condition{
												font-size: 24rpx;
												color: #9e9e9e;
											}
										}
									}
									
									.coupon_item_right_wrap{
										width: 60%;
										height: 100%;
										padding-left: 30rpx;
										padding: 0 20rpx;
										box-sizing: border-box;
										background: #fff;
										display: flex;
										align-items: center;
										-webkit-mask: radial-gradient(circle at 100% 50%, transparent 10rpx, red 0) 0rpx;
										
										.coupon_item_right{
											width: 100%;
											height: 80%;
											display: flex;
											flex-direction: column;
											justify-content: space-around;
											
											.couponType{
												
												.text1{
													border-radius: 14rpx;
													color: #282828;
													font-size: 28rpx;
													font-weight: bold;
												}
												.text2{
													border-radius: 14rpx;
													background-color: $theme-color;
													color: #fff;
													font-size: 24rpx;
													padding: 6rpx 10rpx;
												}
											}
											
											.use_date{
												display: flex;
												flex-direction: column;
												
												.desc{
													font-size: 34rpx;
													font-weight: bold;
													padding-bottom: 10rpx;
												}
												.date{
													font-size: 22rpx;
													color: #747474;
												}
											}
										}
									}
								}
							}
						}
						.coupon_btn{
							width: 100%;
							height: 24%;
							display: flex;
							justify-content: center;
							align-items: center;
							
							.button{
								width: 220rpx;
								height: 60rpx;
								border-radius: 30rpx;
								text-align: center;
								line-height: 60rpx;
								color: #fff;
								background: linear-gradient(to bottom, #ffefb1, #f9a43a);
							}
						}
					}
				}
			}
			.close_box{
				display: flex;
				justify-content: center;
				width: 100%;
				padding-top: 30rpx;
			}
		}
	}
</style>